ツールパネルの追加

Spread.Viewsでは、列の表示/非表示を切り替えるツールパネルを作成できます。ツールパネルには、チェックボックス付きの列リストが表示されます。チェックボックスをチェックした列は、実行時にグリッド内で表示されます。

グリッドにツールパネルを表示するには、次の手順を実行します。

サンプルコード

1. DIVタグを使用して、パネルのコンテナを定義します。これにより、ユーザーはボタンを使用して、パネルの表示/非表示を選択できます。

    <div class="command-container">
       <div class="btn-group" data-toggle="buttons" role="group">
        <button class="btn btn-default" onclick="onShowToolPanelClick(true);">
            Show ToolPanel
        </button> 
        <button class="btn btn-default" onclick="onShowToolPanelClick(false);">
            Hide ToolPanel
        </button>
      </div>    
    </div>

1. 列の定義を追加します。DIVタグのグリッドIDを使用して、初期化コードを追加します。グリッドの初期化時に、showToolPanel をTrueに設定します。このプロパティは、デフォルトのグリッドレイアウトに含まれます。

2. ツールパネルを表示するイベントを呼び出し、いくつかのボタンイベントを定義する関数を追加します。

    function onShowToolPanelClick(visible) 
        { if (visible) { 
            $('#show-btn').addClass('active'); 
            $('#hide-btn').removeClass('active'); 
          } else { 
              $('#show-btn').removeClass('active'); 
              $('#hide-btn').addClass('active'); 
          } 
          dataView.options.showToolPanel = visible; 
   }

参照

showToolPanel
colMinWidth